

<template>

    <el-switch v-model="value1" />

    <el-switch
        v-model="value2"
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        @click="c"
    />{{message}}

<hr>

  <el-switch
      v-model="value3"
      style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
      @click="d"
  />{{showImage}}
  <hr>

  <img src="img.png" width="200px" v-if="value3">

<hr>
  <el-switch v-model="value1"
             style="--el-switch-on-color:#13ce66; --el-switch-off-color:#ff4949"
  ></el-switch>


</template>

<script setup>
import { ref } from 'vue'

const message = ref('开');
const showImage = ref('是否隐藏图片');

const value1 = ref(true)
const value2 = ref(true)
const value3 = ref(true)

const c=()=> {
  if (value2.value)
    message.value = '开';
  else
    message.value = '关';
}

const d=()=>{
  if (value3.value)
    showImage.value='是否隐藏图片';
  else
    showImage.value='是否显示图片';
}



</script>

<style scoped>

</style>